<template>
  <div
    class="title-com"
    :style="{ backgroundColor: item.bgcolor, color: item.color }"
  >
    <div v-show="showDelete" class="list-item-delete  " style="font-size:16px;">
      <span class="pull_left">{{ item.text }}</span>
      <span class="pull_right" @click.stop="deleteCurItem(item, index)"
        >删除</span
      >
    </div>
    <div v-if="item.stylesType == 0" class="styleOne  ">
      <span :style="{ backgroundColor: item.color }"></span>
      <span style="width: 88px;" :style="{ backgroundColor: item.bgcolor }">{{
        item.innertext
      }}</span>
      <span :style="{ backgroundColor: item.color }"></span>
    </div>
    <div v-if="item.stylesType == 1" class="styleTwo  ">
      {{ item.innertext }}
      <img src="http://oss.ztwlxx.cn/icon_right.png" alt="" />
      <span>更多</span>
    </div>
    <div v-if="item.stylesType == 2" class="styleThree  ">
      {{ item.innertext }}
      <img src="http://oss.ztwlxx.cn/icon_right.png" alt="" />
      <span>更多</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: -1
    },
    showDelete: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    deleteCurItem(e, i) {
      this.$emit("deleteCurItem", e, i);
    }
  }
};
</script>

<style lang="scss" scoped>
.title-com {
  position: relative;
  height: 38px;
  line-height: 38px;
  padding: 0 10px;
  color: #595961;
  font-size: 13px;
  .styleOne {
    text-align: center;
    span {
      width: 122px;
      height: 1px;
      display: block;
      float: left;
      background-color: #595961;
      margin-top: 19px;
    }
    span:nth-child(2) {
      height: auto;
      background-color: #fff;
      margin-top: 0;
      width: 85px;
      padding: 0 10px;
    }
  }
  .styleTwo,
  .styleThree {
    span {
      font-size: 10px;
      color: #b1b1b1;
      float: right;
      padding-right: 5px;
    }
    img {
      float: right;
      height: 14px;
      margin: 12px 0;
    }
  }
  .styleThree {
    border-bottom: 1px solid #f0f0f1;
    height: 32px;
  }
}
</style>
